<script setup>
import { ref } from 'vue'
import { api } from "../boot/api.js"
import TextField from '../components/TextField.vue';
import { useRoute,useRouter } from 'vue-router';
import {messages} from '../state/store'
const route = useRoute();
const router = useRouter();
let query = route.query;
let channelId = ref(query.channel)
// let messages = ref([])
let scrollToEnd = ()=>{
    let element = document.getElementById("chatContainer")
    element.scrollTop = element.scrollHeight;
}
const refreshMessage = () => {
    api.get("/channel/single_channel/" + channelId.value).then(res => {
        let response = res.data
        messages.value = response.data.channel_messages
    }).then(()=>{
        scrollToEnd()
    })
}
refreshMessage()
let exitDevice = ()=>{
    api.get("/channel/incr_or_decr?"+new URLSearchParams({channel_id:channelId.value,num:-1})).then(res=>{
        let response = res.data;
        if(response.data === 0){
            alert('释放所有资源')
            router.push({
                name:'LoginView'
            })
        }else{
            alert('在线设备'+response.data)
            router.push({
                name:'LoginView'
            })
        }   
    })
}


//TODO:change to channel
let items = ref([{ id: 1, name: "name1" }, { id: 2, name: "name2" }])
</script>

<template>
    <div class="w-full h-full md:grid md:grid-cols-3">
        <div class=" md:col-span-1  ">
            <!-- <div class="md:h-2/3  m-auto">
                <div v-for="item in items" class=" shadow-md  w-5/6 m-auto h-14 pt-2 ">
                    {{ item.name }}
                </div>
            </div> -->
            <div class="card w-96 m-auto mt-10 bg-base-100 shadow-xl">
            <div class="card-body space-y-4">
                <h2 class="card-title flex justify-center">your channel Id </h2>
                    <div class=" flex justify-center gap-5 text-center auto-cols-max">
                    <div v-for="item in channelId.split('')" class="flex justify-center flex-col p-2 bg-neutral rounded-box text-neutral-content">
                        <span class=" font-mono text-5xl">
                            <span >{{ item }}</span>
                        </span>
                    </div>
                </div>
            </div>
            </div>
            <div class="w-full flex justify-center">
                <button class="btn w-96 btn-primary mt-10 m-auto " @click="exitDevice">exit this device</button>
            </div>
        </div>
        <div class="md:col-span-2 h-full bg-zinc-100 flex justify-center ">
            <div class="w-11/12 h-11/12   bg-zinc-50 mt-1">
                <div class="w-full h-full rounded-2xl shadow-md p-22">
                    <div id="chatContainer" class=" w-full h-screen-11/12 bg-white  overflow-y-scroll">
                        <div class="chat chat-end" v-for="mess in messages">
                            <div class="chat-bubble" v-if="mess.type !== 'file'">{{ mess.content }}</div>
                            <div class="chat-bubble" v-else>
                                <a :href="mess.content" target="_blank" download >{{ mess.content.split('/').slice(-1)[0] }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="w-11/12 h-1/12 mb-3 bg-white  ">
                        <TextField :channel-id="channelId"></TextField>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<style scoped></style>